<template>
  <div class="fan-container">
    <!-- 扇叶循环 -->
    <div
      v-for="(blade, index) in fanBlades"
      :key="index"
      class="fan-blade"
      :style="`--i:${index};`"
      @click="$emit('fan-click', index)"
    >
      <img :src="blade.img" alt="">
      <div class="fan-number-container">
        <div class="fan-label">{{ blade.label }}</div>
        <div class="fan-number">{{ blade.number }}</div>
      </div>
    </div>

    <!-- 圆心数字 -->
    <div class="center-circle" @click="$emit('fan-center-click')">{{ centerNumber }}</div>
  </div>
</template>

<script>
export default {
  name: 'FanChart',
  props: {
    wordStudyTimes: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      centerNumber: 0, // 圆心数字
      fanBlades: [
        { img: require('@/assets/扇叶1.png'), label: '生词', number: 0 },
        { img: require('@/assets/扇叶2.png'), label: '学新', number: 0 },
        { img: require('@/assets/扇叶3.png'), label: '一次复习', number: 0 },
        { img: require('@/assets/扇叶4.png'), label: '二次复习', number: 0 },
        { img: require('@/assets/扇叶5.png'), label: '三次复习', number: 0 },
        { img: require('@/assets/扇叶6.png'), label: '四次复习', number: 0 },
        { img: require('@/assets/扇叶7.png'), label: '五次复习', number: 0 },
        { img: require('@/assets/扇叶8.png'), label: '掌握', number: 0 }
      ]
    }
  },
  watch: {
    'wordStudyTimes'() {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      for (let i = 1; i < this.fanBlades.length; i++) {
        this.fanBlades[i].number = this.wordStudyTimes[i - 1] || 0
      }
      this.fanBlades[0].number = this.wordStudyTimes[7] || 0
      this.centerNumber = this.wordStudyTimes[8] || 0
    }
  }
}
</script>

<style scoped>
* {
  user-select: none;
}

.fan-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: auto;
}

/* 扇叶样式 */
.fan-blade {
  position: absolute;
  top: 33%;
  left: 33%;
  width: 100px;
  height: 100px;
  transform-origin: center center;
  transform: rotate(calc(var(--i) * 45deg)) translateY(-100px);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  /* 平滑过渡 */
  transition: transform 0.3s ease;
}

/* 鼠标移入时放大 */
.fan-blade:hover {
  transform: rotate(calc(var(--i) * 45deg)) translateY(-100px) scale(1.2);
}

/* 圆心数字 */
.center-circle {
  position: absolute;
  top: 50.5%;
  left: 50.5%;
  width: 80px;
  height: 80px;
  background-color: #555;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 28px;
  font-weight: bold;
  transform: translate(-50%, -50%);
  cursor: pointer;
  animation: centerPulse 1.5s ease-in-out 1 forwards;
}

.center-circle:hover {
  background-color: #00b578;
  transform: scale(1);
}

.center-circle::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  top: 0;
  left: 0;
  transform: scale(1);
  animation: ripple 2s ease-out infinite;
}

.fan-blade img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.fan-number-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotate(calc(-1 * var(--i) * 45deg)); /* 保持数字正向 */
}

.fan-label {
  font-size: 12px;
  color: #fff;
  margin-bottom: 4px;
}

.fan-number {
  font-size: 24px;
  font-weight: bold;
  color: white;
  pointer-events: none;
}

/* 定义膨胀动画 */
@keyframes fanPulse {
  0% {
    transform: rotate(calc(var(--i) * 45deg)) translateY(-100px) scale(1);
  }
  50% {
    transform: rotate(calc(var(--i) * 45deg)) translateY(-100px) scale(1.2);
  }
  100% {
    transform: rotate(calc(var(--i) * 45deg)) translateY(-100px) scale(1);
  }
}

.fan-blade {
  position: absolute;
  top: 33%;
  left: 33%;
  width: 100px;
  height: 100px;
  transform-origin: center center;
  transform: rotate(calc(var(--i) * 45deg)) translateY(-100px);
  display: flex;
  justify-content: center;
  align-items: center;

  /* 加入动画 */
  animation: fanPulse 0.6s ease-out;
  animation-delay: calc(var(--i) * 0.1s);
  animation-fill-mode: backwards;
}

@keyframes centerPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

</style>
